<template>
	<view>
		<navbar :title="$t('warehouse.editaddress')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		</navbar>
		<view class="box1">
			<view class="add">
				<view class="address">
					{{$t("editadd.name")}}
				</view>
				<view class="addressR">
					<u-input v-model="name"  :clearable="false" placeholder-style="text-align:end" 
					placeholder=""/>
					<image style="width: 24rpx;height: 24rpx;margin-left: 30rpx" src="../../static/image/wrong.png"
					@click="clear1('name')"></image>
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.ph")}}
				</view>
				<view class="addressR">
					<u-input v-model="mobile"  :clearable="false"  placeholder-style="text-align:end" placeholder=""/>
					<image style="width: 24rpx;height: 24rpx;margin-left: 30rpx" src="../../static/image/wrong.png"
					@click="clear1('mobile')"></image>
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.province")}}
				</view>
				<view class="addressR">
					<u-input v-model="province"  :clearable="false"  placeholder-style="text-align:end" placeholder=""/>
					<image style="width: 24rpx;height: 24rpx;margin-left: 30rpx" src="../../static/image/wrong.png"
					@click="clear1('province')"></image>
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.city")}}
				</view>
				<view class="addressR">
					<u-input v-model="city"  :clearable="false"  placeholder-style="text-align:end" placeholder=""/>
					<image style="width: 24rpx;height: 24rpx;margin-left: 30rpx" src="../../static/image/wrong.png"
					@click="clear1('city')"></image>
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.district")}}
				</view>
				<view class="addressR">
					<u-input v-model="county"  :clearable="false"  placeholder-style="text-align:end" placeholder=""/>
					<image style="width: 24rpx;height: 24rpx;margin-left: 30rpx" src="../../static/image/wrong.png"
					@click="clear1('district')"></image>
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.commune")}}
				</view>
				<view class="addressR">
					<u-input v-model="village"  :clearable="false"  placeholder-style="text-align:end" placeholder=""/>
					
					<image style="width: 24rpx;height: 24rpx;margin-left: 30rpx" src="../../static/image/wrong.png"
					@click="clear1('commune')"></image>
				
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.specific")}}
				</view>
				<view class="addressR">
					<u-input v-model="address"  :clearable="false"  placeholder-style="text-align:end" placeholder=""/>
					<image style="width: 24rpx;height: 24rpx;margin-left: 30rpx" src="../../static/image/wrong.png"
					@click="clear1('specific')"></image>
				</view>
			</view>
			<view class="add">
				<view class="address">
					{{$t("editadd.code")}}
				</view>
				<view class="addressR">
					<u-input v-model="postcode"  :clearable="false"  placeholder-style="text-align:end" placeholder=""/>
					<image style="width: 24rpx;height: 24rpx;margin-left: 30rpx" src="../../static/image/wrong.png"
					@click="clear1('postcode')"></image>
				</view>
			</view>
		</view>
		<view class="box2">
			<view class="as">
				<view class="set">
					{{$t("editadd.set")}}
					<view class="default">
						<image style="width: 26rpx;height: 22rpx" src="../../static/image/warn.png"
						></image>
						<view class="">
							{{$t("editadd.default")}}
						</view>
					</view>
				</view>
				<u-switch v-model="is_default" :active-color="$utypeprimary" :active-value="1" :inactive-value="0"></u-switch>
			</view>
			<view class="confirm" @click="editadd">
				{{$t("editadd.confirm")}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		editaddress,
		setdefault
	}from '../../api/address.js'
	export default {
		data() {
			return {
				name:'',
				mobile:'',
				city:'',
				county:'',
				village:'',
				address:'',
				is_default : 0,
				checked: false,
				postcode:'',
				province : '',
				id : 1,
			};
		},
		methods: {
			clear1(key) {
				if(this.$data[key]){
					this.$data[key] = ''
				}
			},
			async editadd(){
				if (!this.name || !this.mobile || !this.postcode || !this.province || !this.city || !this.county || !this.village || !this.address) {
					uni.showToast({
						icon:'none',
						title: this.$t('editadd.toast'),
						position: 'center',
					})
					return;
				}
				uni.showLoading({
				});
				await editaddress({
					name : this.name,
					mobile : this.mobile,
					postcode : this.postcode,
					province : this.province,
					city: this.city,
					county: this.county,
					village:this.village,
					address : this.address,
					is_default : this.is_default?1:0,
					id : this.id,
				})
				uni.hideLoading();
				uni.navigateBack({
				});
			},
		},
		onLoad(options) {
			let addinfo = JSON.parse(decodeURIComponent(options.addinfo));
			console.log(addinfo)
			this.name = addinfo.name,
			this.mobile = addinfo.mobile,
			this.postcode = addinfo.postcode,
			this.province = addinfo.province,
			this.city= addinfo.city,
			this.county= addinfo.county,
			this.village=addinfo.village,
			this.address = addinfo.address,
			this.is_default = addinfo.is_default,
			this.id = addinfo.id
		}
	}
</script>

<style lang="scss" scoped>
	page{
		 background-color: #F6F6F6;
	}
	
	.box1{
		height: 882rpx;
		background-color: #FFFFFFFF;
		font-size: 32rpx;
		font-family: Rubik;
		font-weight: 400;
		line-height: 108rpx;
		padding: 0 40rpx;
		.add{
			height: 108rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #ECECEC;
			.address{
				color: #2B3039;
			}
			.addressR{
				color: #0F0F0E;
				display: flex;
				align-items: center;
				text-align: right;
			}
		}
	}
	
	/deep/.u-input{
		align-items: center;
		
	}
	/deep/.uni-input-input{
		text-align: right;
		color: #0F0F0E ;
	}
	
	.box2{
		overflow: hidden;
		height: 427rpx;
		background-color: #FFFFFFFF;
		margin-top: 20rpx;
		padding: 0 40rpx;
		.as{
			display: flex;
			justify-content: space-between;
			.set{
				font-size: 32rpx;
				line-height: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #2B3039;
				margin-top: 45rpx;
				.default{
					display: flex;
					font-size: 26rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #BDBDBD;
					line-height: 26rpx;
					margin-top: 21rpx;
				}
			}
		}
	}
	.u-switch{
		margin-top: 47rpx;
		
	}
	/deep/.u-switch__node {
		background-color: $u-type-primary !important; 
	}
	
	.confirm{
		width: 670rpx;
		height: 90rpx;
		background: $u-type-primary;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #fff;
		line-height: 90rpx;
		text-align: center;
		position: fixed;
		bottom: 30rpx;
	}
</style>
